﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FieldSet</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
    
    <style type="text/css">
    fieldset
    {
        border:solid 1px #aaa;
    }        
    .hideFieldset
    {
        border-left:0;
        border-right:0;
        border-bottom:0;
    }
    .hideFieldset .fieldset-body
    {
        display:none;
    }
    
    </style>
</head>
<body>
    <h1>FieldSe </h1>

    <h4>不可折叠</h4>
    <fieldset id="fd1" style="width:600px;">
        <legend><span>用户注册</span></legend>
        <div class="fieldset-body">
            <table class="form-table" border="0" cellpadding="1" cellspacing="2">
                <tr>
                    <td class="form-label" style="width:60px;">姓名：</td>
                    <td style="width:150px">
                        <input name="name" class="mini-textbox" />
                    </td>
                    <td class="form-label" style="width:60px;">地址：</td>
                    <td style="width:150px">
                        <input name="addr" class="mini-textbox" />
                    </td>
                </tr>
                <tr>
                    <td class="form-label">性别：</td>
                    <td >
                        <input name="gender" class="mini-radiobuttonlist" data="[{id: 1, text: '男'}, {id: 2, text: '女'}]"/>
                    </td>
                    <td class="form-label">年龄：</td>
                    <td >
                        <input name="age" class="mini-spinner" />
                    </td>
                </tr>
                <tr>
                    <td class="form-label">备注：</td>
                    <td colspan="3" >
                        <input name="remarks" class="mini-textarea" style="width:343px;height:60px;"/>
                    </td>        
                </tr>
            </table>
        </div>
    </fieldset>

    <br />
    <h4>可折叠</h4>
    <fieldset id="fd2" style="width:600px;">
        <legend><label><input type="checkbox" checked id="checkbox1" onclick="toggleFieldSet(this, 'fd2')" hideFocus/>详细信息</label></legend>
        <div class="fieldset-body">
            <table class="form-table" border="0" cellpadding="1" cellspacing="2">
                <tr>
                    <td class="form-label" style="width:60px;">身份证：</td>
                    <td style="width:150px">
                        <input name="name" class="mini-textbox" />
                    </td>
                    <td class="form-label" style="width:60px;">籍贯：</td>
                    <td style="width:150px">
                        <input name="addr" class="mini-textbox" />
                    </td>
                </tr>               
            </table>
        </div>
    </fieldset>
    <script type="text/javascript">
        function toggleFieldSet(ck, id) {
            var dom = document.getElementById(id);
            dom.className = !ck.checked ? "hideFieldset" : "";
        }
    </script>
</body>
</html>
